<template>
    <el-form ref="form" :model="user" :rules="rules" label-width="155px">
        <el-row>
            <el-col :span="3">
                <el-form-item :label="editFlag ? '修改：开' : '修改：关'">
                    <div style="margin-top: 8px;">
                        <el-switch style="display: block" v-model="editFlag" active-color="#13ce66"/>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="所属科室" prop="marital">
                    <treeselect v-model="user.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属科室" style="width: 250px" disabled/>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="政治面貌" prop="politicsStatus">
                    <el-select v-model="user.userInfo.politicsStatus" placeholder="请选择政治面貌" :disabled="!editFlag" style="width: 250px;" clearable>
                        <el-option v-for="item in dict.type.basic_politics_status_dict" :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="账号" prop="userName">
                    <el-input v-model="user.userName" maxlength="30" style="width: 250px" disabled/>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="用户姓名" prop="nickName" clearable>
                    <el-input v-model="user.nickName" maxlength="30" :disabled="!editFlag" style="width: 250px"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="性别">
                    <el-select v-model="user.sex" placeholder="请选择性别" :disabled="!editFlag" style="width: 100px;" clearable>
                        <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="生日" prop="birthday" clearable>
                    <el-date-picker v-model="user.birthday" type="date" value-format="yyyy-MM-dd" :disabled="!editFlag"
                                    placeholder="请选择生日" style="width: 250px"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="身份证" prop="identity">
                    <el-input v-model="user.identity" placeholder="请输入身份证" maxlength="32" :disabled="!editFlag" style="width: 250px" clearable/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="user.email" placeholder="请输入用户邮箱" :disabled="!editFlag" style="width: 250px" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="手机号码" prop="phonenumber">
                    <el-input v-model="user.phonenumber" placeholder="请输入手机号码" :disabled="!editFlag" maxlength="11"  style="width: 250px" clearable/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="婚姻状态">
                    <el-radio-group v-model="user.userInfo.marital">
                        <el-radio v-for="dict in dict.type.basic_marital_dict" :disabled="!editFlag" :key="parseInt(dict.value)" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="生育状态" prop="marital">
                    <el-select v-model="user.userInfo.birth" placeholder="请选择生育状态" :disabled="!editFlag" style="width: 250px;" clearable>
                        <el-option v-for="item in dict.type.basic_birth_dict" :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="9">
                <el-form-item label="医师资格证书号" prop="docCertNum">
                    <el-input v-model="user.userInfo.docCertNum" placeholder="请输入医师资格证书号" :disabled="!editFlag" style="width: 250px" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="医师资格证书获得时间" prop="certGetTime">
                    <el-date-picker v-model="user.userInfo.certGetTime"  type="date" value-format="yyyy-MM-dd" :disabled="!editFlag"
                                    placeholder="医师资格证书获得时间" style="width: 250px" clearable></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="user.remark" rows="3" placeholder="请输入备注" :disabled="!editFlag" style="width: 700px"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item v-if="editFlag">
            <el-button type="danger" size="mini" @click="close" plain>关闭</el-button>
            <el-button type="primary" size="mini" @click="submit" plain>保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {deptTreeSelect, updateUserProfile} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


export default {
    props: {
        user: {
            type: Object
        }
    },
    components: {Treeselect},
    dicts: ['sys_user_sex','basic_marital_dict', 'basic_birth_dict', 'basic_politics_status_dict','basic_educatiod_dict', 'basic_degree_dict', 'basic_degree_type_dict'],
    data() {
        return {
            // 科室树选项
            deptOptions: undefined,
            //是否开启修改
            editFlag:false,
            // 表单校验
            rules: {
                nickName: [
                    {required: true, message: "用户姓名不能为空", trigger: "blur"}
                ],
                email: [
                    {type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}
                ],
                phonenumber: [
                    {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
                ],
                identity: [
                    {pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: "请输入正确的身份证号", trigger: "blur"}
                ]
            }
        };
    },
    created() {
        this.getDeptTree();
    },
    methods: {
        /** 查询科室下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        submit() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    updateUserProfile(this.user).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.reload();
                    });
                }
            });
        },
        close() {
            this.$tab.closePage();
        }
    }
};
</script>
